<template>
    <div class="wrap">
        <div><filter-params @paramsChange="paramsChange" :config="config" :filterParams="config.filterParams" ></filter-params></div>
        <div style="height: 100%" :ref="config.alias"></div>
    </div>
</template>

<script>
import ChartPublic from '../ChartPublic.js'
export default {
    /**
     * 漏斗图
     */
    name: "funnelComponent",
    mixins: [ChartPublic],
    data() {
        return {
        }
    },
    methods: {
        setOption(){
            //图例组件
            let legend = this.dimensionVals;
            let data = [];
            for (let i = 0; i < legend.length; i++) {
                let val=this.measureVals[i]?this.measureVals[i].value:"";
                data.push({value: val, name: legend[i] })
            }
            let formatter=this.config.advConfig.formatter?this.config.advConfig.formatter:''
            this.option  = {
                tooltip: {
                    trigger: 'item',
                    formatter:'{a} <br/>{b} : {c}'+formatter,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {show:this.config.advConfig.saveAsImage},
                        restore: {show: this.config.advConfig.restore}
                    }
                },
                legend: {
                    data:legend
                },
                color:this.getColors(),
                series: [
                    {
                        name: this.config.name,
                        type: 'funnel',
                        left: '10%',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            label: {
                                fontSize: this.config.advConfig.fontSize
                            }
                        },
                        sort:this.config.advConfig.sort,
                        data: data
                    }
                ]
            };
        }
    }
}
</script>
